<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">头像信息</div>
        </template>
        <div class="text item">
          <div class="avatar">
            <el-avatar class="avatar" shape="square" :size="50" :src="avatarURL" />
          </div>
          <el-upload
            ref="uploadRef"
            class="upload-demo"
            :limit="1"
            :action="uploadURL"
            :headers="headers"
            :data="uploadData"
            :auto-upload="false"
            :on-success="uploadSuccess">
            <template #trigger>
              <p><el-button type="primary">选择头像</el-button></p>
            </template>
            <div>
              <el-button type="success" @click="submitUpload">上传头像</el-button>
            </div>
            <template #tip>
              <div class="el-upload_tip">限制上传1个文件，且旧文件会被新文件覆盖</div>
            </template>
          </el-upload>
        </div>
      </el-card>
    </el-col>
    <el-col :span="16">
      <el-card class="box-card">
        <template #header>个人信息</template>
        <div class="change-password-box">
          <el-form ref="ruleFormRef" status-icon :model="form" :rules="rules" label-width="140px">
            <el-form-item prop="password" label="修改密码">
              <el-input type="password" v-model="form.password" />
            </el-form-item>
            <el-form-item prop="confirmPassword" label="请再次输入密码">
              <el-input type="password" v-model="form.confirmPassword" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import {ref, reactive } from 'vue'
import defaultAvatarURL from '/images/avatar-default.png'
import { uploadPictureURL, changeAdminPassword, changeAdminAvatar } from '../../api'
import useToken from '../../stores/token'
import useAdmin from '../../stores/admin'
import router from '../../router'
import notification from '../../utils/notification'

const { admin, updateAdmin, removeAdmin } = useAdmin()
const { token, removeToken } = useToken()
const headers = { jwt: token }

const uploadURL = uploadPictureURL()
const uploadData = { type: 'admin_avatar'}

const form = reactive({
  password: '',
  confirmPassword: ''
})

const avatarURL = ref(admin.avatar || defaultAvatarURL) // admin.avatar
const ruleFormRef = ref()
const uploadRef = ref()

// 修改密码
const submitForm = formEl => {
  formEl.validate(async valid => {
    if (valid) {
      await changeAdminPassword({password: form.password})
      resetForm()
      //退出登录
      removeToken()
      removeAdmin()
      router.push('/login')
      notification({
        message: '密码修改完成，请重新登录',
        type: 'warning'
      })
    } else {
      notification({
        message: '表单填写有误',
        type: 'error'
      })
    }
  })
}

const resetForm = () => {
  ruleFormRef.value.resetFields()
}

// 上传头像
const submitUpload = () => {
  uploadRef.value.submit()
}

// 上传成功
const uploadSuccess = async response => {
  const { errno, errmsg, data } = response
  if (errno !== 0) {
    notification({
      message: errmsg,
      type: 'error'
    })
  } else {
    if (errmsg !== '') {
      notification({
        message: errmsg,
        type: 'success'
      })
    }
    await changeAdminAvatar({avatar: data.savepath})
    updateAdmin({avatar: data.url})
    avatarURL.value = data.url
  }
  uploadRef.value.clearFiles()
}

const validatePass = (rule, value, callback) => {
  if (value !== form.password) {
    callback(new Error('两次输入密码不一致'))
  } else {
    callback()
  }
}

const rules = reactive({
  password: [
    { required: true, message: '请输入密码', trigger: 'blur'},
    { min: 6, max: 24, message: '密码长度为6~24个字符', trigger: 'blur'}
  ],
  confirmPassword: [
    { required: true, message: '请输入密码', trigger: 'blur'},
    { validator: validatePass, trigger: 'blur'}
  ]
})
</script>

<style lang="scss" scoped>
.avatar {
  text-align: center;
}
.upload-demo {
  text-align: center;
}
.box-card {
  height: 315px;
}
.change-password-box {
  padding-top: 36px;
}
</style>